<template>
    <div id="service_request_ram_info" style="height:350px;width:100%;"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme

export default {
  name: 'ServiceRequestsRam',
  props: ['ramInfoChart'],
  watch: {
    ramInfoChart: function(newVal, oldVal) {
      this.init()
    }
  },
  mounted() {
    // 监听侧边栏的变化
    this.sidebarElm = document.getElementsByClassName('sidebar-container')[0]
    this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
  },
  methods: {
    init() {
      const ServiceRequestsRam = this.$echarts.init(document.getElementById('service_request_ram_info'), 'macarons')

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.4)',
          textStyle: {
            color: '#FFFFFF'
          },
          axisPointer: {
            type: 'cross'
          },
          padding: [5, 10]
        },
        toolbox: {
          feature: {
            //saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'time',
            boundaryGap: false,
            // data: ['周一', '周二', '周三', '周四','周三', '周四']
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#131D33'
              }
            }
          }
        ],
        dataZoom: [
          {
            show: true, // 是否展示
            xAxisIndex: [0],  // 控制第一个x轴
            height: 15,
            left: 100,
            right: 100,
            bottom: 0,
            start: 0,  // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
            end: 80,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
            handleSize: '10%',
            zoomLock: true //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true
          },
          {
            type: 'inside',  // 内置型数据区域缩放组件，用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系
            show: true,
            disabled: false,  // 是否停止组件的功能
            height: 15,
            left: 100,
            right: 100,
            start: 0,
            end: 80
          }
        ],
        yAxis: [
          {
            type: 'value',
            // data: ['2', '4', '6', '8']
            splitNumber: 6,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#C8CCDD'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                type: [2, 20],
                dashOffset: 5
              }
            },
            splitArea: { show: false }
          }
        ],
        series: [
          {
            name: '内存使用',
            type: 'line',
            stack: '总量',
            symbol: 'none',
            // areaStyle: { color: '#418709' },
            data: this.ramInfoChart.memTimeData
            // [["2020-12-25 15:33:11","5"],["2020-12-25 15:34:11","5"],
            //   ["2020-12-25 15:35:11","4.8"],["2020-12-25 15:36:11","5"],
            //   ["2020-12-25 15:37:11","4.7"],["2020-12-25 15:38:11","4.8"],
            //   ["2020-12-25 15:39:11","5"],["2020-12-25 15:40:11","5"],
            //   ["2020-12-25 15:41:11","4.9"],["2020-12-25 15:42:11","5"],
            //   ["2020-12-25 15:43:11","5"],["2020-12-25 15:44:11","4.9"],
            //   ["2020-12-25 15:45:11","5"],["2020-12-25 15:46:11","5"],
            //   ["2020-12-25 15:47:11","4.8"],["2020-12-25 15:48:11","5"],
            //   ["2020-12-25 15:49:11","5"],["2020-12-25 15:50:11","4.9"],
            //   ["2020-12-25 15:51:11","4.8"],["2020-12-25 15:52:11","5"],
            //   ["2020-12-25 15:53:11","5"],["2020-12-25 15:54:11","4.7"],
            //   ["2020-12-25 15:55:11","5"],["2020-12-25 15:56:11","5"],
            //   ["2020-12-25 15:57:11","5"],["2020-12-25 15:58:11","5"],
            //   ["2020-12-25 15:59:11","5"],["2020-12-25 16:00:11","5"],
            //   ["2020-12-25 16:01:11","5"],["2020-12-25 16:02:11","5"]]
          }
        ]
      }
      ServiceRequestsRam.setOption(option)

      window.addEventListener('resize', function() {
        ServiceRequestsRam.resize()
      })
    }
  }
}
</script>
